<template>
	<div class="classify">
		<div class="div1">
			<el-input v-model="text" placeholder="请输入内容"></el-input>
			<el-button @click="findPageKey()" type="danger" icon="el-icon-search"></el-button>
		</div>
		<hr />
		<div class="cl">
			<div class="type">
				<aside class="q" @click="findByBookId(0)">
					<span>全部类型-(默认)</span>
					<p>></p>
				</aside>
				<ul v-for="(item,id) in fun">
					<li @click="findByBookId(item.id)">
						{{item.name}}<span>></span>
						<li v-for="(k,id) in item.list" @click="findByBookId(k.id)">
							{{item.name}}/{{k.name}}<span>></span>
						</li>
					</li>
				</ul>
			</div>
			<div class="book">
				<div class="div2" v-for="item in list">
					<div class="image">
						<div class="img">
							<img :src="`${$ip}/api/public/showimg/${item.pic}`"/>
						</div>
					</div>
					<div class="date">
						<p><strong  v-html="item.name"></strong></p>
						<aside class="aside1">
							<span><strong>{{item.maker}}</strong></span>
						</aside>
						<aside class="aside2">
							<span v-html="item.info"></span>
						</aside>
					</div>
					<div class="pay">
						<p>￥{{item.price}}</p>
						<aside>
							<el-button type="primary" @click="goBookDetail(item.id)">详情</el-button>
							<br/>
							<el-button type="danger" @click="AddCart(item.id)">购买</el-button>
						</aside>
					</div>
				</div>
			</div>
		</div>
		<div class="upload" v-if="showBackToTop" @click="scrollToTop()">
			<i class="el-icon-upload2"></i>
			<span>顶部</span>
		</div>
	</div>
</template>

<script>
export default {
	name:'ClassIfy',
	data(){
		return{
			type:[],
			value:[],
			list:[],
			page:{
				start:1,
				num:6
			},
			total:0,
			text:''
		}
	},
	methods:{
		// 添加购物车
		AddCart(id){
			if(this.$store.state.role!=''){
				this.$get("/api/public/addCart/"+id).then((resp)=>{
					this.$message({
						message: resp.data.msg,
						type: 'success'
					});
				})
			}else{
				this.$message.error('您未登录,请先登录!');
			}
		},
		// 根据同类型查找
		findByBookId(id){
			this.$get("/api/public/findPageBook/1/6/"+id).then((resp)=>{
				this.list =resp.data.data.books;
				console.log(resp.data.data.books);
			})
		},
		// 前往书籍详情页
		goBookDetail(id){
			console.log(id);
			this.$router.push({path:`/pc/pcbookdetail/${id}`})
		},
		// 根据key值查找
		findPageKey(){
			this.$postkv(`/api/public/book/findPageKey/${this.page.start}/${this.page.num}`,{key:this.text}).then((resp)=>{
				this.list =resp.data.data.books;
				this.total =resp.data.data.total;
				console.log(this.list);
			})
		},
		// 处理滚动事件
		handleScroll() {
			// 判断滚动位置是否超过200（可根据需要调整）  
			this.showBackToTop = window.scrollY > 200;
		},
		// 返回顶部  
		scrollToTop() {
			// 平滑滚动到顶部  
			window.scrollTo({
				top: 0,
				behavior: 'smooth',
			});
		},
	},
	mounted(){
		this.text=this.$route.query.key;
		this.findPageKey();
		if(this.text==undefined){
			if(this.$route.query.id!=undefined){
				this.findByBookId(this.$route.query.id)
			}else{
				this.findByBookId(0);
			}
		}
		this.$get("/api/public/type/findAll2").then((resp)=>{
			this.type =resp.data.data;
			console.log(this.type);
			console.log(resp.data.data);
		})
		console.log(this.fun);
		// 监听滚动事件
				window.addEventListener('scroll', this.handleScroll);
		},
		beforeDestroy() {
			// 移除滚动事件监听器，防止内存泄漏  
			window.removeEventListener('scroll', this.handleScroll);
	},
	computed:{
		fun(){
			this.type.forEach((item)=>{
				if(item.pid==0){
					this.value.push({
						id:item.id,
						name:item.name,
						prio:item.prio
					})
				}
			})
			console.log(this.value);
			this.value.forEach((i)=>{
				let types2 =[];
				this.type.forEach((item)=>{
					if(item.pid==i.id && item.pid>0){
						types2.push({
							id:item.id,
							name:item.name,
							prio:item.prio
						})
					}
				})
				i.list=types2;
			})
			return this.value;
		}
	}
}
</script>

<style scoped>
.classify{
	width: 78%;
	margin: 0 auto;
}
.classify .div1{
	margin-top: 20px;
}
.classify hr{
	margin-top: 20px;
	border: 1px solid red;
}
.classify .div1 .el-input{
	width: 600px;
	margin-left: 350px;
}
.classify .cl{
	width: 98%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.classify .cl .type{
	width: 240px;
}
.classify .cl .type .q{
	width: 92%;
	margin-left: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.classify .cl .type .q:hover{
	border: 2px solid red;
}
.classify .cl .type .q p{
	font-size: 18px;
	color: red;
}
.classify .cl .type ul{
	width: 98%;
	margin: 0 auto;
}
.classify .cl .type ul li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px;
}
.classify .cl .type ul li:hover{
	border: 2px solid red;
}
.classify .cl .type ul li span{
	color: red;
	font-size: 18px;
}
.classify .cl .book{
	width: 75%;
}
.classify .cl .book .div2{
	width: 56vw;
	margin: 10px auto;
	display: flex;
}
.classify .cl .book .div2:hover{
	background-color: aliceblue;
}
.classify .cl .book .div2 .img{
	width: 160px;
	height: 160px;
}
.classify .cl .book .div2 .img img{
	width: 100%;
	height: 100%;
}
.classify .cl .book .div2 .date{
	width: 700px;
	margin-left: 20px;
}
.classify .cl .book .div2 .date p{
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}
.classify .cl .book .div2 .date .aside1{
	width: 300px;
	margin-top: 10px;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.classify .cl .book .div2 .date .aside2{
	width: 420px;
	text-indent: 2em;
	font-size: 14px;
	margin-top: 8px;
}
.classify .cl .book .div2 .pay{
	width: 150px;
}
.classify .cl .book .div2 .pay p{
	font-size: 18px;
	margin-left: 90px;
	color: red;
}
.classify .cl .book .div2 .pay aside{
	margin-left: 80px;
	margin-top: 30px;
}
.classify .cl .book .div2 .pay aside .el-button:nth-last-child(1){
	margin-top: 15px;
}
.upload {
	width: 40px;
	height: 40px;
	padding: 4px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	flex-direction: column;
	/* 设置为列方向 */
	background-color: #f0f0f0;
	position: fixed;
	bottom: 40px;
	right: 20px;
}
.upload i {
	font-size: 22px;
}
.upload span {
	font-size: 10px;
	margin-top: 2px;
}
.upload:hover{
	cursor: pointer;
	font-weight: 700;
}
</style>
